import { UserOutlined } from '@ant-design/icons'
import { Avatar, Button, Card, Col, Descriptions, Input, Row } from 'antd'
import React, { useState } from 'react'

const tabListNoTitle = [
  {
    key: 'information',
    tab: '基本信息',
  },
  {
    key: 'setting',
    tab: '安全设置',
  },
  {
    key: 'realname',
    tab: '实名认证',
  },
]

const contentListNoTitle: Record<string, React.ReactNode> = {
  information: (
    <>
      <span>姓名：</span>
      <Input size="large" style={{ width: 333 }} placeholder="large size" prefix={<UserOutlined />} />
      <br />
      <br />

      <div style={{ margin: 20 }}>
        <Button type="primary" style={{ marginRight: 10 }}>
          保存
        </Button>
        <Button>重置</Button>
      </div>
    </>
  ),
  setting: <p>2222</p>,
  realname: <p>3333</p>,
}

const App: React.FC = () => {
  //   const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
  const [activeTabKey2, setActiveTabKey2] = useState<string>('information')

  //   const onTab1Change = (key: string) => {
  //     setActiveTabKey1(key);
  //   };
  const onTab2Change = (key: string) => {
    setActiveTabKey2(key)
  }

  return (
    <>
      <Card
        style={{ width: '100%' }}
        title="个人中心"
        //   activeTabKey={activeTabKey1}
        //   onTabChange={onTab1Change}
      >
        <Row>
          <Col span={4}>
            <Avatar
              size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
              src="https://leuan.top/files/2023/03/25/LOGO.png"
            />
          </Col>
          <Col span={20}>
            <Descriptions layout="horizontal">
              <Descriptions.Item label="用户名">小马</Descriptions.Item>
              <Descriptions.Item label="账号ID">1810000000</Descriptions.Item>
              <Descriptions.Item label="手机号">
                111111<a style={{ color: '#165DFF', width: 60, textAlign: 'center' }}>修改</a>
              </Descriptions.Item>
              <Descriptions.Item label="实名认证">
                <span style={{ color: '#00B42A', background: '#E8FFEA', width: 60, textAlign: 'center' }}>已认证</span>
              </Descriptions.Item>
              <Descriptions.Item label="注册时间">2023-5-16 12:00:00</Descriptions.Item>
            </Descriptions>
          </Col>
        </Row>
      </Card>
      <br />

      <Card style={{ width: '100%' }} tabList={tabListNoTitle} activeTabKey={activeTabKey2} onTabChange={onTab2Change}>
        {contentListNoTitle[activeTabKey2]}
      </Card>
    </>
  )
}

export default App
